<template>
    <div style="margin-right:300px" >
        <div style="margin-top: -20px" >
            <header>
                <div>
                    <el-button type="primary" @click="queryComment()">所有评论</el-button>
                    <el-button type="success" @click="queryComment(5)" >好评</el-button>
                    <el-button type="warning" @click="queryComment(3)">一般</el-button>
                    <el-button type="danger" @click="queryComment(1)">差评</el-button>
                </div>
            </header>
        </div>
        <div>
            <section style="width: 1000px;height:800px;margin-top: 20px ;overflow: hidden;font-size: 14px;color: #666666 ;">
                <div v-for="(pinglun,index) in pinglun" :key="index" style="overflow: hidden;">
                    <div style="float: left;overflow: hidden;margin-top: 20px">
                        <div style="float: left;border-radius: 20px;width: 50px;height: 50px;"><el-image style="border-radius: 50%" :src="pinglun.users.userPicture"></el-image>  </div>
                        <div style="float: left"><span style="margin-left: 5px">{{pinglun.users.userName}}</span>
                            <div v-if="pinglun.comStar==1"><img src="../../../public/image/pinglun/1.png" /></div>
                            <div v-if="pinglun.comStar==2"><img src="../../../public/image/pinglun/2.png" /></div>
                            <div v-if="pinglun.comStar==3"><img src="../../../public/image/pinglun/3.png" /></div>
                            <div v-if="pinglun.comStar==4"><img src="../../../public/image/pinglun/4.png" /></div>
                            <div v-if="pinglun.comStar==5"><img src="../../../public/image/pinglun/5.png" /></div>

                        </div>
                    </div>
                    <div style="float: right">
                        <span>{{pinglun.comTime}}</span>
                    </div>
                    <div style="margin-top: 80px;font-size: 14px;color: #666666 ">
                       {{pinglun.comContent}}
                    </div>
                    <div style="margin-top: 25px;margin-left: 15px">
                        <div style="width: 180px;height: 180px" v-if="pinglun.comIamge!=null"><img
                                src="../../../public/image/DishesManagement/ia_100000003.jpg" height="180" width="180"/>
                        </div>
                    </div>
                    <div style="border-top: 1px solid #e5e5e5; margin-top: 30px  "></div>
                </div >

            </section>
            <div style="text-align: center; margin-top: -70px">
                <el-pagination
                        @size-change="queryComment()"
                        @current-change="queryComment()"
                        :current-page.sync="UserBo.commentPage.current"
                        :page-size.sync="UserBo.commentPage.size"
                        :page-sizes="[2, 6]"
                        layout="total, prev, pager, next,sizes"
                        :total="this.DataTotal">
                </el-pagination>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Comment",
        data(){
            return{
                UserBo:{
                    commentPage: {
                        current: 1,
                        size: 2
                    },
                    userBusinessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId,
                    comStar:null,
                },
                pinglun:{

                },
                DataTotal:null,
                a1:false,
                a2:false,
                a3:false,


            }
        },
        mounted() {
            this.queryComment();
        },methods:{
            queryComment(comStar){
                this.UserBo.comStar=comStar
                this.$axios.post("administration/comment/queryComment",this.UserBo).then(response=>{
                    this.pinglun=response.data.records
                    this.DataTotal=response.data.total
                })
            }
        }
    }
</script>

<style scoped>

</style>